/*
 * @Author: hongbin
 * @Date: 2022-02-18 09:54:08
 * @LastEditors: hongbin
 * @LastEditTime: 2022-03-21 23:36:56
 * @Description:svg图标
 */

import styled, { keyframes } from "styled-components";

export const mouseGunLun = (
  <svg
    viewBox='0 0 1024 1024'
    version='1.1'
    xmlns='http://www.w3.org/2000/svg'
    p-id='3296'
    width='32'
    height='32'
  >
    <path
      d='M512 510.90941968c-22.35689648 0-40.89676184-17.99457522-40.89676184-40.89676185V342.41476087c0-22.35689648 17.99457522-40.89676184 40.89676184-40.89676185 22.35689648 0 40.89676184 17.99457522 40.89676184 40.89676185v127.59789696c0 22.90218663-18.53986537 40.89676184-40.89676184 40.89676185z'
      fill='#ffffff'
      p-id='3297'
    ></path>
    <path
      d='M657.04718202 131.9327599h-110.69390207v-18.53986537c0-38.71560122-21.26631616-74.70475164-55.07430596-93.78990717l-32.17211932-17.99457521c-16.35870474-9.26993269-37.07973073-3.27174094-46.34966343 13.0869638-9.26993269 16.35870474-3.27174094 37.07973073 13.0869638 46.34966343l32.17211933 17.9945752c12.54167363 7.08877205 20.17573584 20.17573584 20.17573583 34.35327995v18.53986537H366.95281798c-108.51274143 0-196.30445688 88.33700559-196.30445687 196.30445686v298.81900657c0 181.58162259 147.77363281 329.90054556 329.90054557 329.90054556h23.4474768c181.58162259 0 329.90054556-147.77363281 329.90054557-329.90054556V328.23721676c-0.54529015-107.96745129-88.33700559-196.30445688-196.84974703-196.30445686z m128.14318712 495.66875358c0 143.9566017-117.23738396 261.73927581-261.73927582 261.73927583h-23.4474768c-143.9566017 0-261.19398567-117.23738396-261.19398566-261.73927583V328.23721676c0-70.88772053 57.80075674-128.14318712 128.14318712-128.14318712h290.09436404c70.88772053 0 128.14318712 57.80075674 128.14318712 128.14318712v299.36429672z'
      fill='#ffffff'
      p-id='3298'
    ></path>
  </svg>
);

export const mouseRight = (
  <svg
    viewBox='0 0 1024 1024'
    version='1.1'
    xmlns='http://www.w3.org/2000/svg'
    p-id='3539'
    width='32'
    height='32'
  >
    <path
      d='M657.04718202 131.9327599h-110.69390207v-18.53986537c0-38.71560122-21.26631616-74.70475164-55.07430596-93.78990717l-32.17211932-17.99457521c-16.35870474-9.26993269-37.07973073-3.27174094-46.34966343 13.0869638-9.26993269 16.35870474-3.27174094 37.07973073 13.0869638 46.34966343l32.17211933 17.9945752c12.54167363 7.08877205 20.17573584 20.17573584 20.17573583 34.35327995v18.53986537H366.95281798c-108.51274143 0-196.30445688 88.33700559-196.30445687 196.30445686v298.81900657c0 181.58162259 147.77363281 329.90054556 329.90054557 329.90054556h23.4474768c181.58162259 0 329.90054556-147.77363281 329.90054557-329.90054556V328.23721676c-0.54529015-107.96745129-88.33700559-196.30445688-196.84974703-196.30445686zM366.95281798 200.09402964H512v243.74470062H238.80963086V328.23721676c0-70.34243037 57.25546659-128.14318712 128.14318712-128.14318712z m157.0435655 688.70146951h-23.4474768c-143.9566017 0-261.73927581-117.23738396-261.73927582-261.73927582V512h546.38073828v115.60151348c0 143.9566017-117.23738396 261.19398567-261.19398566 261.19398567z'
      fill='#ffffff'
      p-id='3540'
    ></path>
  </svg>
);

export const mouseLeft = (
  <svg
    viewBox='0 0 1024 1024'
    version='1.1'
    xmlns='http://www.w3.org/2000/svg'
    p-id='3765'
    width='32'
    height='32'
  >
    <path
      d='M657.04718202 131.9327599h-110.69390207v-18.53986537c0-38.71560122-21.26631616-74.70475164-55.07430596-93.78990717l-32.17211932-17.99457521c-16.35870474-9.26993269-37.07973073-3.27174094-46.34966343 13.0869638-9.26993269 16.35870474-3.27174094 37.07973073 13.0869638 46.34966343l32.17211933 17.9945752c12.54167363 7.08877205 20.17573584 20.17573584 20.17573583 34.35327995v18.53986537H366.95281798c-108.51274143 0-196.30445688 88.33700559-196.30445687 196.30445686v298.81900657c0 181.58162259 147.77363281 329.90054556 329.90054557 329.90054556h23.4474768c181.58162259 0 329.90054556-147.77363281 329.90054557-329.90054556V328.23721676c-0.54529015-107.96745129-88.33700559-196.30445688-196.84974703-196.30445686z m128.14318712 495.66875358c0 143.9566017-117.23738396 261.73927581-261.73927582 261.73927583h-23.4474768c-143.9566017 0-261.73927581-117.23738396-261.73927582-261.73927583V477.64672005H784.64507898v149.95479343z m0-218.11606318h-265.55630693V200.09402964h136.86782965c70.88772053 0 128.14318712 57.80075674 128.14318712 128.14318712v81.24823354z'
      fill='#ffffff'
      p-id='3766'
    ></path>
  </svg>
);

export const SpaceBar = (
  <svg
    viewBox='0 0 1024 1024'
    version='1.1'
    xmlns='http://www.w3.org/2000/svg'
    p-id='1358'
    width='32'
    height='32'
  >
    <path
      d='M213.333333 640v-149.333333a21.333333 21.333333 0 0 0-21.333333-21.333334h-42.666667a21.333333 21.333333 0 0 0-21.333333 21.333334V640a85.333333 85.333333 0 0 0 85.333333 85.333333h597.333334a85.333333 85.333333 0 0 0 85.333333-85.333333v-149.333333a21.333333 21.333333 0 0 0-21.333333-21.333334h-42.666667a21.333333 21.333333 0 0 0-21.333333 21.333334V640z'
      p-id='1359'
      fill='#ffffff'
    ></path>
  </svg>
);

export const Music = (
  <svg
    viewBox='0 0 1024 1024'
    version='1.1'
    xmlns='http://www.w3.org/2000/svg'
    p-id='3667'
    width='32'
    height='32'
  >
    <path
      d='M895.456 770.56C895.552 769.696 896 768.896 896 768L896 160c0-1.056-0.512-1.984-0.608-3.008-0.032-1.664 0.448-3.232 0.16-4.928-2.88-17.408-19.328-29.184-36.8-26.304l-480 80c-17.408 2.912-29.216 19.392-26.304 36.832 0.256 1.472 1.024 2.656 1.44 4.032C352.96 249.664 352 252.672 352 256l0 429.6c-20.128-9.376-43.648-14.784-69.408-14.784-21.312 0-42.816 3.456-63.968 10.336-39.616 12.8-73.536 36.224-95.584 65.984-24.064 32.512-31.68 70.24-20.864 103.648 15.648 48.288 66.656 79.456 129.92 79.456 21.248 0 42.72-3.456 63.904-10.304 58.656-19.04 100.288-59.2 115.04-103.808C413.888 811.328 416 806.016 416 800l0-5.312c1.056-8.48 1.056-16.96 0-25.472L416 264.448l416-69.344 0 490.88c-20.32-9.632-44.096-15.2-70.176-15.2-21.28 0-42.816 3.456-63.968 10.336-39.584 12.8-73.568 36.224-95.584 65.984-24.096 32.512-31.68 70.24-20.864 103.648 15.648 48.288 66.656 79.456 129.92 79.456 21.248 0 42.752-3.456 63.904-10.304C853.472 894.56 902.176 831.68 895.456 770.56z'
      p-id='3668'
      fill='#ffffff'
    ></path>
  </svg>
);

export const Jump = (
  <svg
    viewBox='0 0 1024 1024'
    version='1.1'
    xmlns='http://www.w3.org/2000/svg'
    p-id='2356'
    width='16'
    height='16'
  >
    <path
      d='M670.165333 268.501333L913.664 512l-243.498667 243.498667-60.330666-60.330667L750.293333 554.666667H298.666667v-85.333334h451.626666l-140.458666-140.501333 60.330666-60.330667zM213.333333 469.333333v85.333334H128v-85.333334h85.333333z'
      p-id='2357'
      fill='#fffae5'
    ></path>
  </svg>
);

const animate = `
    0%{transform: rotate(0deg)};
    100%{transform: rotate(360deg)}
`;

const keyframe = keyframes`${animate}`;

export const LoadIcon = styled.svg.attrs({
  children: (
    <path
      d='M959.6 452.2c-2.8-17.4-6.2-34.6-10.6-51.6-5.6-21.6-12.8-43-21.6-63.6-17.8-42.4-42.2-82-71.8-117.2-32-37.8-70.6-70.4-113.4-95.4C700 99.6 654 82 606 72.2c-24.8-5-49.8-8-75.2-8.2-19.8-0.2-39.6 0.6-59.2 2.4-51 5-101.4 19.2-147.8 41-39.8 18.8-76.8 43.2-109.6 72.4-32.8 29.2-61.4 63.2-84.4 100.6-25.4 41.6-44.4 87-54.8 134.6-8.4 38-12.4 77.2-10.4 116.2 1.8 37.8 7.6 75.6 19 111.8 7.2 23 15.8 45.4 26.6 67.2 10.6 21.4 23 42 36.8 61.4 27.6 38.6 61.2 72.8 99.6 101 39.2 29 83.4 51.4 129.8 66.2 48.4 15.4 99.8 22.6 150.6 20.8 49.6-1.6 98.8-11.2 145.2-29 44.6-17.2 86.4-41.8 123-72.6 18.4-15.6 34.8-33.2 50.2-51.8 15.6-18.8 29.6-38.6 41.2-60 10-18.4 18.4-37.6 25.6-57 3.6-9.6 7-19.2 9.8-29.2 3-10.6 5.2-21.6 7.2-32.4 3-17 4.2-34.6 2.6-51.8-1.4 7.6-2.6 15-4.4 22.4-2.2 8.6-5 17-8.2 25.2-6.4 17.4-14.4 34.2-22 51-9.8 21.4-21.2 41.8-33.6 61.6-6.4 10.2-13 20.2-20.2 29.8-7.2 9.6-15.4 18.8-23.6 27.8-16.4 18.2-34.2 34.4-54 48.8-20.2 14.8-41.6 27.8-64.2 38.6-45.2 22-94.6 35.2-144.6 39.6-51.2 4.4-103.4-0.6-152.6-15.2-46.8-13.8-91.2-36.2-130.2-65.6-37.8-28.6-70.6-63.8-96.4-103.6C150.8 695.6 132.2 649.8 122 602c-2.6-12.4-4.6-25.2-6-37.8-1.2-10.8-2.2-21.8-2.6-32.8-0.6-22.6 0.8-46 4.2-68.4 7.4-49.2 23.4-96.6 48.2-139.8 22-38.6 50.6-73.4 84.2-102.8 33.6-29.6 72-53.4 113.6-70.2 24-9.8 49.2-17 74.8-21.8 13-2.4 26-4.4 39-5.4 6.4-0.6 12.6-0.6 19-1.2 2.6 0 5.2 0.2 7.8 0.2 43.4-0.8 87 4.8 128.4 17.8 44.6 14 86.6 36.6 123 66 38.2 30.8 70 68.8 94 111.6 20.4 36.4 35 75.6 43.8 116.4 2 9.4 3.6 18.8 5.2 28.2 1.4 8.6 6.2 16.6 13.6 21.4 15.6 10.4 37.4 3.4 45-13.4C959.8 464.2 960.6 458 959.6 452.2z'
      p-id='2419'
      fill='#FFFFFF'
    ></path>
  ),
  viewBox: "0 0 1024 1024",
  version: "1.1",
  xmlns: "http://www.w3.org/2000/svg",
  "p-id": "2418",
  width: "1vmax",
  height: "1vmax",
})`
  animation: ${keyframe} 1s linear infinite;
`;

export const Play = (
  <svg
    viewBox='0 0 1024 1024'
    version='1.1'
    xmlns='http://www.w3.org/2000/svg'
    p-id='6968'
    width='32'
    height='32'
  >
    <path
      d='M810.4 465.8 253.6 134.4c-6.8-4-13.8-6.4-21.8-6.4-21.8 0-39.6 18-39.6 40L192 168l0 688 0.2 0c0 22 17.8 40 39.6 40 8.2 0 15-2.8 22.4-6.8l556.2-331c13.2-11 21.6-27.6 21.6-46.2C832 493.4 823.6 477 810.4 465.8z'
      p-id='6969'
    ></path>
  </svg>
);

export const Pause = (
  <svg
    viewBox='0 0 1024 1024'
    version='1.1'
    xmlns='http://www.w3.org/2000/svg'
    p-id='6165'
    width='32'
    height='32'
  >
    <path
      d='M341.332992 142.222336c47.128576 0 85.334016 38.20544 85.334016 85.332992v568.889344c0 47.128576-38.20544 85.332992-85.334016 85.332992-47.127552 0-85.332992-38.20544-85.332992-85.332992V227.555328c0-47.128576 38.20544-85.332992 85.332992-85.332992z m341.334016 0c47.127552 0 85.332992 38.20544 85.332992 85.332992v568.889344c0 47.128576-38.20544 85.332992-85.332992 85.332992-47.128576 0-85.334016-38.20544-85.334016-85.332992V227.555328c0-47.128576 38.20544-85.332992 85.334016-85.332992z'
      fill='#323233'
      p-id='6166'
    ></path>
  </svg>
);
